<template>
  <ul v-if="mediaExtends" class="mediainfo">
    <li>
      <span>直播状态：</span>
      <span>
        <span v-if="mediaExtends.livestate == 'pending'">等待直播</span>
        <span v-else-if="mediaExtends.livestate == 'live'" type="success">直播中</span>
        <span size="mini" v-else-if="mediaExtends.livestate == 'end'" type="danger">直播结束</span>
        <span size="mini" v-else type="warning">未知</span>
      </span>
    </li>
    <li>
      <span>直播开始时间：</span>
      <span>{{mediaExtends.starttime}}</span>
    </li>
    <li>
      <span>直播结束时间：</span>
      <span>{{mediaExtends.endtime}}</span>
    </li>
    <li>
      <span>观看认证类型：</span>
      <span>
        <span v-if="mediaExtends.viewauthtype == 0">所有人</span>
        <span v-else-if="mediaExtends.viewauthtype == 1">白名单</span>
        <span v-else-if="mediaExtends.viewauthtype == 2">黑名单</span>
        <span size="mini" v-else>其他</span>
      </span>
    </li>
    <li>
      <span>是否录制：</span>
      <span>
        <span v-if="mediaExtends.isrecord == 1">是</span>
        <span v-else type="danger">否</span>
      </span>
    </li>
    <li>
      <span>录制上传状态：</span>
      <span>
        <span v-if="mediaExtends.recordupstate == 1">上传完成</span>
        <span v-else type="warning">上传中</span>
      </span>
    </li>
    <li>
      <span>录制上传路径：</span>
      <span>{{mediaExtends.recorduppath}}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    name: "WhiteBoard",
    props: {
      mediaExtends: {
        type: Object,
        required: true
      }
    }
  }
</script>

<style scoped>
  ul li{
    list-style-type: none;
    float: left;
    width: 50%;
  }
  .tag {
    margin-right: 5px;
  }
</style>
